<template>
	<view class="page">
		<div class="biaotou">
		<p class="welcome">欢迎使用~</p>
		<p class="register-title">用户注册</p>
		</div>
		<view class="register-form">
		<view class="form-item">
			<view class="form-title">
				<span class="iconfont icon-shouji"></span>手机号</view>
			<input type="text" placeholder="请输入手机号" maxlength="11" v-model="phoneNum"/>
		</view>
		<view class="form-item">
			<view class="form-title">
				<span class="iconfont icon-mima"></span>密码</view>
			<input type="password" placeholder="请输入密码" maxlength="11" v-model="password"/>
		</view>
		<view class="form-item">
			<view class="form-title">
				<span class="iconfont icon-mima"></span>确认密码</view>
			<input type="password" placeholder="请确认密码" maxlength="11" v-model="confirmPassword"/>
		</view>
		</view>
		<view class="register-btn" @click="registerForm">
			<!-- <button type="submit">注册</button> -->
			注册
		</view>
		
	</view>
</template>

<script>
	import {registration} from "../../api/index.js"
	export default {
		data() {
			return {
				phoneNum:'',
				password:'',
				confirmPassword:''
			}
		},
		methods: {
			// 提交注册
			registerForm(){
				// 组合数据
				let obj = {
					phoneNum:this.phoneNum,
					password:this.password
				}
				console.log(obj);
				// 判断输入的是否为空
				if(!this.phoneNum.trim() || !this.password.trim() || !this.confirmPassword.trim()){
					uni.showToast({
						title:"不能为空"
					})
					return
				}
				// 判断密码和确认密码是否一致
				if(this.password === this.confirmPassword) {
					registration(obj).then(res=>{
						if(res.data.status === 0) {
							uni.showToast({
								title:"注册成功"
							})
							setTimeout(()=>{
								// 跳转到登录页面
								uni.navigateTo({
									url:"/pages/login/login"
								})
							},800)
						} else {
							uni.showToast({
								title:"注册失败"
							})
						}
					})
				} else {
					uni.showToast({
						title:"密码不一致"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background: linear-gradient(#77DDFF, #FFB7DD);
		width:100%;
		height:100vh;
		.welcome{
			font-size:16px;
			font-weight: bold;
			width:100%;
			height:40rpx;
			line-height: 40rpx;
			// background-color: #FFB7DD;
			padding-left: 15rpx;
		
		}
	}
	.register-title{
		font-size: 14px;
		font-weight: bold;
		width:100%;
		height:40rpx;
		line-height: 40rpx;
		padding-left: 15rpx;
		margin:50rpx 0 50rpx 0;
	}
	.register-form{
		width:85%;
		height:500rpx;
		margin: 0 auto;
		// font-size: 14px;
		background-color: #fff;
		border-radius: 10px;
		padding:20rpx;
		.form-item{
			height:100rpx;
			margin:40rpx 0;
			// background-color: pink;
			.form-title{
				margin-bottom:10rpx;
			}
			input{
				padding-left: 5rpx;
				border-bottom: 1px solid #FF0088;
			}
		}
		
	}
	
	.register-btn{
		width:85%;
		height:80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: 	#FF88C2;
		margin:70rpx auto 0;
		border-radius: 30rpx;
	}
	

</style>
